﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Collision Chamber</title>
</head>
<body>
<script type="text/javascript" src="js/Framework.js"></script>
<script type="text/javascript" src="js/Vector2.js"></script>
<script type="text/javascript" src="js/Color.js"></script>
<script type="text/javascript" src="js/Particle.js"></script>
<script type="text/javascript" src="js/ParticleSystem.js"></script>
<script type="text/javascript" src="js/ChamberBox.js"></script>
<button onclick="stop();">Stop</button>
<br/>
<canvas id="collisionChamberCanvas" width="400" height="400"></canvas>
<script>
    var ps = new ParticleSystem();
    ps.effectors.push(new ChamberBox(0, 0, 400, 400));
    var dt = 0.01;

    function sampleDirection(angle1, angle2) {
        var t = Math.random();
        var theta = angle1 * t + angle2 * (1 - t);
        return new Vector2(Math.cos(theta), Math.sin(theta));
    }

    function sampleColor(color1, color2) {
        var t = Math.random();
        return color1.multiply(t).add(color2.multiply(1 - t));
    }

    function step() {
        ps.emit(new Particle(new Vector2(200, 200), sampleDirection(Math.PI * 1.75, Math.PI * 2).multiply(250), 3, sampleColor(Color.blue, Color.purple), 5));
        ps.simulate(dt);

        ctx.fillStyle = "rgba(0, 0, 0, 0.1)";
        ctx.fillRect(0, 0, canvas.width, canvas.height);
        ps.render(ctx);
    }

    start("collisionChamberCanvas", step);
</script>
</body>
</html>
